﻿@using TextAdventures.Quest;
@using WebEditor.Views.Edit;
@model WebEditor.Models.EditAttributeModel
           
<script type="text/javascript">
    function postChanges() {
        var data = $('form').serialize();
        $.post('/Edit/SaveElement', data, function (response) {
            // refresh the attribute row with updated values after save
            var attributeRowHtml = $('#attr__@(Model.Control.Attribute)', $(response)).html();
            $('#attr__@(Model.Control.Attribute)').html(attributeRowHtml);
        });
    }

    $(document).ready(function () {
        // rename the name attribute for inputs within the attribute editor
        // to differentiate from similar inputs from the form
        $('.multi-control-editor :input').each(function () {
            var id = $(this).attr('id');
            var name = $(this).attr('name');
            id = 'attr-' + id;
            name = 'attr_' + name;
            $(this).removeAttr('id');
            $(this).removeAttr('name');
            $(this).attr('id', id);
            $(this).attr('name', name);
        });

        $(".elementEditorCheckbox").change(function () {
            $("input[name='attributeEditorValue']").val($(this).is(':checked'));
            postChanges();
        });

        $(".elementEditorTextbox").change(function () {
            $("input[name='attributeEditorValue']").val($(this).val());
            postChanges();
        });

        $(".elementEditorTextbox").on('keyUp paste', function () {            
            $("input[name='attributeEditorValue']").val($(this).val());
        });

        $(".multi-dropdown").change(function () {
            var key = $(this).attr("data-key");
            var value = $(this).find('option:selected').attr("value");
            $.post('/Edit/ProcessAction', { id: "@(Model.Element.GameId)", key: "@(Model.Element.Key)", tab: "@(Model.Element.Tab)", actionCmd: "multi set " + key + ";" + value }, function (response) {
                // refresh the attribute list table
                var tempScrollPos = $('#attributesListScroller').scrollTop();
                var attributeListHtml = $('#attributesListEditor', $(response)).html();
                $('#attributesListEditor').html(attributeListHtml);
                initializeAttributeListEditor();
                $('#attributesListScroller').scrollTop(tempScrollPos);
            });
        });
    });
</script>

@Html.Hidden("attributeEditorFieldName", Model.Control.Attribute)
@Html.Hidden("attributeEditorValue")

<div id="attributeMultiControl_editor">
    @RenderMultiControl(Model.Control, Model.Value)
</div>

@helper RenderMultiControl(IEditorControl ctl, object value)
{
    string caption = ctl.GetString("selfcaption");
    if (caption != null)
    {
        <text>@caption:</text>
    }
    IDictionary<string, string> types = ctl.GetDictionary("types");
    string selectedType = ControlHelpers.GetTypeName(value);
    @Html.DropDownList(ctl.Attribute + "-type", types.Select(t => new SelectListItem { Text = t.Value, Value = t.Key, Selected = (t.Key == selectedType) }), new { @class = "multi-dropdown", data_key = ctl.Attribute })
    <br />
    string controlType = ControlHelpers.GetEditorNameForType(selectedType, ctl.GetDictionary("editors"));
    string ctlCaption = null;
    if (controlType == "checkbox")
    {
        ctlCaption = ctl.GetString("checkbox");
    }
    <div class="multi-control-editor">
        @{
            var editorControlModel = new WebEditor.Models.Controls.EditorControl
            {
                Control = ctl,
                Caption = ctlCaption,
                ControlType = controlType,
                IsFirst = false,
                Controller = Model.Element.Controller,
                GameId = Model.Element.GameId,
                EditorData = Model.Element.EditorData,
                Key = Model.Element.Key
            };
            Html.RenderPartial("Controls/EditorControl", editorControlModel);
        }
    </div>
}